<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	pageContext.setAttribute("path",request.getContextPath());
%>
<%@taglib prefix="s" uri="/struts-tags" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script type="text/javascript" src="js/jquery1.5.1.js"></script>
<!-- 下拉分页实现  <script type="text/javascript" src="js/scrollpagination.js"></script>-->
<script type="text/javascript" src="js/json2.js"></script>
<link href="css/scrollpagination_demo.css" rel="stylesheet" media="screen" />

<script type="text/javascript">
				$(document).ready(function(){
						//使图标始终位于浏览器底部
						 	
						//浏览器窗口变化	
							cover();
						//$(window).resize(function(){ 
						//	cover();
						//	});
					
						//简介页面出现
						$("#image01").click(function(){
									$("#fuwu_div").fadeOut();			
									$("#jianjie_div").fadeIn(1000);						
							});
						//服务范围
						$("#image02").click(function(){
									$("#jianjie_div").fadeOut();			
									$("#fuwu_div").fadeIn(1000);					
							});
					
					
						//标题栏和下划线的淡入
										 $("#image01").fadeIn(3000);
										 $("#image02").fadeIn(3000);
										 $("#image03").fadeIn(3000);
										 $("#image04").fadeIn(3000);
										 $("#image05").fadeIn(3000);
										 $("#image06").fadeIn(3000);
										 
										 
								var  $slider = $(".curBg1")
										$liCur = $("#image01"),
				  					curP = -1,
				  					curW = -1;
				  					
										$navBox = $(".imag");
										 $targetEle = $(".cur"),
										 
										
										$targetEle.mouseenter(function () {
										  var $_parent = $(this).parent().parent(),
											_width = $_parent.outerWidth(true),
											posL = $_parent.position().left;
										  $slider.stop(true, true).animate({
											"left":posL,
											"width":_width
										  }, "fast");
										});
										

									}); 
				//ready函数结束
						function cover(){
						 	var win_width = $(window).width();
							var win_height = $(window).height();
							
							$(".box").css({
								width:win_width,
								height:win_height
								});
							$("#bigpicarea").css({
								width:win_width,
								height:win_height
								});
							$(".images").css({
								width:win_width,
								height:win_height
								});
							//顶部logo
							$("#ding_logo_div").css({
								left:win_width*0.5-win_width*0.1*0.7,
								top:0
								});
							$("#ding_logo").css({
								width:win_width*0.1,
								height:win_height*0.1
								});
								
							//底部logo
							$("#bottom_logo_div").css({
								left:win_width*0.5-win_width*0.05*0.8,
								bottom:0
								});
							$("#bottom_logo").css({
								width:win_width*0.05,
								height:win_height*0.08
								});
							$("#bottom_di_div").css({
								left:win_width*0.5-win_width*0.04*0.9,
								bottom:0
								});
							$("#bottom_di").css({
								width:win_width*0.04,
								height:win_height*0.024
								});
								
							
							$(".nav").css({
								 width:win_width,
								});
								
							$("#box1").css({
								width:win_width,
								//height:win_height-8,
								bottom:0
								});
							//尖角背景里面的内容
							$("#box1").find('p').css({
								"padding-left":win_width*0.3
								});
								
								
							$("#boximage").css({
								width:win_width,
								height:win_height-8,
								bottom:0
								});
							
							//光标样式
							$(".curBg1").css({
								top:win_height*0.055,
								
								});
								
							//标题栏字体样式
							$("#images01").css({
								width:win_width*0.04,
								height:win_height*0.03
								});
							$("#image01").css({
								left:win_width*0.1,
								top:win_height*0.02
								});
								
							$("#images02").css({
								width:win_width*0.055,
								height:win_height*0.0299
								});
							$("#image02").css({
								left:win_width*0.19,
								top:win_height*0.02
								});
							$("#images03").css({
								width:win_width*0.035,
								height:win_height*0.031
								});
							$("#image03").css({
								left:win_width*0.30,
								top:win_height*0.02
								});
							$("#images04").css({
								width:win_width*0.034,
								height:win_height*0.03
								});
							$("#image04").css({
								left:win_width*0.613,
								top:win_height*0.02
								});
							$("#images05").css({
								width:win_width*0.036,
								height:win_height*0.038
								});
							$("#image05").css({
								left:win_width*0.703,
								top:win_height*0.015
								});
							$("#images06").css({
								width:win_width*0.055,
								height:win_height*0.03
								});
							$("#image06").css({
								left:win_width*0.793,
								top:win_height*0.018
								});
								
								
							//简介样式
							$("#jianjie_div").css({
								left:win_width*0.5-win_width*0.32*0.5,
								bottom:win_height*0.4
								});
							$("#jianjie").css({
								width:win_width*0.32,
								height:win_height*0.13
								});
							//服务范围样式
							$("#fuwu_div").css({
								left:win_width*0.5-win_width*0.4*0.5,
								bottom:win_height*0.3
								});
							$("#fuwu").css({
								width:win_width*0.38,
								height:win_height*0.4
								});
							
						
						}
						var target = ["5icool-01"];

						//下拉脚本的引入函数 方便调试
						(function( $ ){
	 
							var size=0;		 
							 $.fn.scrollPagination = function(options) {
							  	
									var opts = $.extend($.fn.scrollPagination.defaults, options);  
									var target = opts.scrollTarget;
									if (target == null){
										target = obj; 
								 	}
									opts.scrollTarget = target;
								 
									return this.each(function() {
									  $.fn.scrollPagination.init($(this), opts);
									});
							
							  };
							  
							  $.fn.stopScrollPagination = function(){
								  return this.each(function() {
								 	$(this).attr('scrollPagination', 'disabled');
								  });
								  
							  };
							  
							  $.fn.scrollPagination.loadContent = function(obj, opts){
								 var target = opts.scrollTarget;
								 var mayLoadContent = $(target).scrollTop()+opts.heightOffset >= $(document).height() - $(target).height();
								 if (mayLoadContent){
									 if (opts.beforeLoad != null){
										opts.beforeLoad(); 
									 }
									 $(obj).children().attr('rel', 'loaded');
									 $.ajax({
										  type: 'POST',
										  url: opts.contentPage,
										  data:{currentPage:size},//opts.contentData,
										  success: function(data){
										  	//alert(data);
										  	if(opts.addContent123!=null) {
										  		size=size+1;
												opts.addContent123(data);
											}
											/*
										   	var jsonObject=JSON.parse(data);//将返回的数据转化为json类型 
											size=size+1;
											
											var html="<li style='opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);height=60px'><font size='20' color='red'>"+jsonObject.page+"</font></li>";
											$(obj).append(html); 
											var objectsRendered = $(obj).children('[rel!=loaded]');
											*/
											
											if (opts.afterLoad != null){
												opts.afterLoad(objectsRendered);	
											}
										  },
										  dataType: 'html'
									 });
								 }
								 
							  };
							  
							  $.fn.scrollPagination.init = function(obj, opts){
								 var target = opts.scrollTarget;
								 $(obj).attr('scrollPagination', 'enabled');
								
								 $(target).scroll(function(event){
									if ($(obj).attr('scrollPagination') == 'enabled'){
								 		$.fn.scrollPagination.loadContent(obj, opts);		
									}
									else {
										event.stopPropagation();	
									}
								 });
								 
								 $.fn.scrollPagination.loadContent(obj, opts);
								 
							 };
								
							 $.fn.scrollPagination.defaults = {
							      	 'contentPage' : null,
							     	 'contentData' : {},
									 'beforeLoad': null,
									 'afterLoad': null	,
									 'scrollTarget': null,
									 'heightOffset': 0	,
									 'addContent123': null	  
							 };	
						})( jQuery );
						
						//下拉分页脚本实现
						
						$(function(){
							var var_currentPage=1;
							$('#content').scrollPagination({
								'contentPage': "ajGetNewsAction", // the url you are fetching the results
								'contentData': {currentPage:var_currentPage}, // these are the variables you can pass to the request, for example: children().size() to know which page you are
								'scrollTarget': $(window), // who gonna scroll? in this example, the full window
								'heightOffset': 10, // it gonna request when scroll is 10 pixels before the page ends
								'beforeLoad': function(){ // before load function, you can display a preloader div
									$('#loading').fadeIn();	
						
								},
								'addContent123': function(reData){ // after loading content, you can use this function to animate your new elements
									//alert("fds:"+reData);
									var jsonObject=JSON.parse(reData);//将返回的数据转化为json类型
									alert("fds:"+jsonObject.pageSize); 
									var html="<li style='opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);height=60px'><font size='20' color='red'>"+jsonObject.page+"</font></li>";
									$(obj).append(html); 
									var objectsRendered = $(obj).children('[rel!=loaded]');
								},
								'afterLoad': function(elementsLoaded){ // after loading content, you can use this function to animate your new elements
									 $('#loading').fadeOut();
									 var i = 0;
									 $(elementsLoaded).fadeInWithDelay();
									 if ($('#content').children().size() > 100){ // if more than 100 results already loaded, then stop pagination (only for testing)
									 	$('#nomoreresults').fadeIn();
										$('#content').stopScrollPagination();
									 }
								},
								
							});
							
							// code for fade in element by element
							$.fn.fadeInWithDelay = function(){
								var delay = 0;
								return this.each(function(){
									$(this).delay(delay).animate({opacity:1}, 200);
									delay += 100;
								});
								
							};
								   
						});
</script>


<link href="css/5icool.org.css" rel="stylesheet" type="text/css">


</head>
<body style="">
	<!--顶部导航栏-->

			
		<div id="back"  style='clear:both;z-index:1;position:absolute;border:0px solid red;background-color:gray;height:33px;width:100%;'></div>
		<div style='height:8px;width:100%;background-color:black;z-index:3;position:absolute;'> </div>
				
					<!--导航标题-->
							<div class='imag' style='position:absolute;z-index:3;display:none' id='image01'> 
								<a href="#">
							    <img src='images/detail.png' id='images01' class="cur"/>
							  </a>
					    </div>
					    <div class='imag' style='position:absolute;z-index:3;display:none' id='image02'> 
					    	<a href="#">
							    <img src='images/detail2.png' id='images02' class="cur"/>
							    </a>
					    </div>
					    <div class='imag' style='position:absolute;z-index:3;display:none' id='image03'> 
					    	<a href="#">
							    <img src='images/detail3.png' id='images03' class="cur"/>
							    </a>
					    </div>
					     <div class='imag' style='position:absolute;z-index:3;display:none' id='image04'> 
					     	<a href="#">
							    <img src='images/detail4.png' id='images04' class="cur"/>
							    </a>
					    </div>
					     <div class='imag' style='position:absolute;z-index:3;display:none' id='image05'> 
					     	<a href="#">
							    <img src='images/detail5.png' id='images05' class="cur"/>
							    </a>
					    </div>
					     <div class='imag' style='position:absolute;z-index:3;display:none' id='image06'> 
					     	<a href="#">
							    <img src='images/detail6.png' id='images06' class="cur"/>
							    </a>
					    </div>
					    
					    <!-- 光标下划线 -->
					    <div class="curBg1" style='position:absolute;z-index:3;display:none'></div>
					    <div class="cls" style='position:absolute;z-index:3;display:none'></div>
				 
					    
						<!-- 简介页面 -->			 
							 
					     <div id='jianjie_div' style='position:absolute;z-index:3;display:none' > 					     	
							    <img src='images/jianjie.png' id='jianjie'/>
					    </div>
					    
					  <!-- 服务范围页面 -->			 
					     <div id='fuwu_div' style='position:absolute;z-index:3;display:none' > 					     	
							    <img src='images/fuwu.png' id='fuwu'/>
					    </div>
						
		
	<!--顶部中心图标-->
		<div id="ding_logo_div" style='z-index:5;position:absolute;border:0px solid blue'>
				<img src='images/ding_logo.png' id="ding_logo"/>	
			</div>
		<!--背景尖角图标-->	
			<div id='box1' style='position:absolute;border:0px solid red;margin:0s;z-index:2;'>
					<img src='images/title.png' id='boximage' style='margin:0;position:absolute;z-index:2'>		
					</img>	
			</div>
			<div id='content' name='content' style="position:absolute;border:0px solid red;margin:30% 0 0 0;z-index:2;background:url('images/ping.png');width:100%;">				
						<div style='margin-left: 30%'>fdsfdsfdsfds</div>
						<div style=''>fdsfdsfdsfds</div>
						<div style=''>fdsfdsfdsfds</div>
						<div style=''>fdsfdsfdsfds</div>
						<div style=''>fdsfdsfdsfds</div>
						<div style=''>fdsfdsfdsfds</div>
						<div style=''>fdsfdsfdsfds</div>
						<div style=''>fdsfdsfdsfds</div>
						<div style=''>fdsfdsfdsfds</div>
						<div style=''>fdsfdsfdsfds</div>
						<div style=''>fdsfdsfdsfds</div>
						<div style=''>fdsfdsfdsfds</div>
						<div style=''>fdsfdsfdsfds</div>
						<div style=''>fdsfdsfdsfds</div>
						<div style=''>fdsfdsfdsfds</div>
						<div style=''>fdsfdsfdsfds</div>
						<div style=''>fdsfdsfdsfds</div>
						<div style=''>fdsfdsfdsfds</div>
						<div style=''>fdsfdsfdsfds</div>
						<div style=''>fdsfdsfdsfds</div>
						<div style=''>fdsfdsfdsfds</div>
						<div style=''>fdsfdsfdsfds</div>
						<div style=''>fdsfdsfdsfds</div>
						<div style=''>fdsfdsfdsfds</div>
						<div style=''>fdsfdsfdsfds</div>
						<div style=''>fdsfdsfdsfds</div>
						<div style=''>fdsfdsfdsfds</div>
						<div style=''>fdsfdsfdsfds</div>
						<div style=''>fdsfdsfdsfds</div>
						<div style=''>fdsfdsfdsfds</div>
						<div style=''>fdsfdsfdsfds</div>
						<div style=''>fdsfdsfdsfds</div>
						<div style=''>fdsfdsfdsfds</div>
						<div style=''>fdsfdsfdsfds</div>
						<div style=''>fdsfdsfdsfds</div>
						<div style=''>fdsfdsfdsfds</div>
						<div style=''>fdsfdsfdsfds</div>
						<div style=''>fdsfdsfdsfds</div>
						<div style=''>fdsfdsfdsfds</div>
						<div style=''>fdsfdsfdsfds</div>
						<div style=''>fdsfdsfdsfds</div>
						<div style=''>fdsfdsfdsfds</div>
						<div style=''>fdsfdsfdsfds</div>
						<div style=''>fdsfdsfdsfds</div>
						
						<div class="loading" id="loading">Wait a moment... it's loading!</div>
    				<div class="loading" id="nomoreresults">Sorry, no more results for your pagination demo.</div>
					
			</div>
				<!--底部中心图标-->
					
	
					<!--幻灯片背景-->
					 <div class="box" style='margin:0;border:0px solid blue;z-index:-1;position:absolute'>
						<div id="bigpicarea" style="margin:0;border:0px solid red;z-index:-1;position:absolute">
						<p class="bigbtnPrev"><span id="big_play_prev"></span></p>
						<div id="image_5icool-01" class="image" style="opacity: 1; display: block; ">
							<a href=""  >
								<img src="images/shou_1.jpg" class='images'></a>
							<div class="word" style="display: block;"></div>
						</div>
       
						

						
        <p class="bigbtnNext"><span id="big_play_next"></span></p>
    </div>
	 </div>
		
		
		
			
		
			
			
	
</body>
</html>